<template>
  <div id="addGoods">
    <h3>新增商品</h3>
    <el-form ref="formRef" :rules="formRules" :model="goods" label-width="180px">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="goods.name"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-cascader
            v-model="goods.type"
            :options="goodsTypeList"
            :props="{
              checkStrictly: true,
              emitPath: true,
              label: 'categoryName',
              value: 'id'
            }"
            clearable
            filterable
        >

        </el-cascader>
      </el-form-item>

      <el-form-item label="单位" prop="unit">
        <el-input v-model="goods.unit"></el-input>
      </el-form-item>

      <el-form-item label="单价" prop="price">
        <el-input v-model="goods.price"></el-input>
      </el-form-item>

      <!--<el-form-item label="图标">
        <el-upload
            action="http://localhost:8080/goodsInfo/fuTuUpload"
            list-type="picture"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            :on-exceed="handleExceed"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fuImages"
            :auto-upload="false"
            :limit="5"
            multiple
            class="avatar-uploader"
        >
          &lt;!&ndash;<el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture">&ndash;&gt;
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>-->

      <el-form-item label="商品描述" prop="detail" cleanable>
        <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="goods.detail">
        </el-input>
      </el-form-item>
      <el-form-item label="展示图" prop="zanShiTu">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/goodsInfo/avatarImgUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <div class="form-actions" style="display: flex; justify-content: flex-end; align-items: center; margin-top: 20px;">
          <el-button @click="closeBtn">返回</el-button>
          <el-button type="primary" @click="addGoodsBtn('formRef')">确 定</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "AddGoods",
  data(){
    return {
      // 副展示图
      fuImages: [],

      //展示图
      imageUrl: '',

      //form
      goods: {},


      // 表单校验规则
      formRules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur'},
        ],
        unit: [
          { required: true, message: '请输入单位', trigger: 'blur'},
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur'},
        ],
        zanShiTu: [
          { required: true, message: '请上传展示图', trigger: 'blur'},
        ],
        detail: [
          { required: true, message: '请选择商品描述', trigger: 'blur'},
        ],
        type: [
          { required: true, message: '请选择商品类型', trigger: 'blur'},
        ],
      },

      //分级的商品类型
      goodsTypeList:[],
    }
  },
  methods: {
    //添加
    addGoodsBtn(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post('/goodsInfo/addGoods',this.goods);
          this.$message.success(res);
          /*//自定义事件处理界面刷新
          this.$emit('query');*/
          this.$router.push('/goods');
        } else {
          this.$message.error('校验失败！')
        }
      })

    },
    //返回
    closeBtn() {
      this.$router.push("/goods")
    },

    //图标成功上传的回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = res;
      this.goods.zanShiTu = this.imageUrl
    },
    //上传之前的校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG  格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    //分级的商品类型
    async queryGoodsTypeListLevel() {
      const { data: res } = await this.$http.post("/goodsCategory/queryGoodsTypeListLevel");
      this.goodsTypeList = res;
    },
  },
  created() {

      this.queryGoodsTypeListLevel()
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
}
.avatar {
  width: 78px;
  height: 78px;
  display: block;
}
</style>